import React from "react";
class TabControl extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            currentIndex: 0
        }
    }

    render() {
        const { titles } = this.props
        const {currentIndex} = this.state
        return (
            <div className="tab-control">
                {
                    titles.map((item, index) => {
                        return (
                            <div key={index}
                                className={"tab-item" + (currentIndex === index ? " active" : "")}
                                onClick={e => {this.selectedTab(index)}}>
                                    <span className={currentIndex === index ? "indicator" : ""}>
                                        {item}
                                    </span>
                            </div>
                        )
                    })
                }
            </div>
        )
    }

    selectedTab(index) {
        const { tabControlClick } = this.props
        tabControlClick(index)
        this.setState({
            currentIndex: index
        })
    }
}

export default TabControl;